import React, { Component } from 'react'
import {List, InputItem, NavBar, Icon, Grid} from 'antd-mobile'

import { connect } from "react-redux";
import { getMsgList, sendMsg, recvMsg, readMsg } from '../../redux/chat.redux'


import io from 'socket.io-client'
import { getChatId } from '../../util/util';
const socket = io('ws://localhost:9093');

@connect(
    state => state,
    {getMsgList, sendMsg, recvMsg, readMsg}
)
export default class Chat extends Component {
    constructor(props) {
        super(props)
        this.state = {text:'',msg:[]}
    }
    componentDidMount(){
        if(!this.props.chat.chatmsg.length){
            this.props.getMsgList()
            this.props.recvMsg()
        }
        this.fixCarouserl()
        
    }
    fixCarouserl(){
        setTimeout(function(){
            console.log('event')
            window.dispatchEvent(new Event('resize'))
        },20)
    }   
    componentWillUnmount(){
        const to = this.props.match.params.user
        this.props.readMsg(to)
    }
    handleSubmit(){

        const from = this.props.user._id
        const to = this.props.match.params.user
        const msg = this.state.text

        this.props.sendMsg({from,to,msg})
        this.setState({
            text:'',
            showEmoji:false
        })
    }
    render() {
        const emoji = '😀 😂 ☹️ 😟 😬 😈 😅 😐 😛 😕 😎 😉 😆 😘 😍 😊 😓 😡 😰 😱 😌 😉 😏 😞 😪 😳 😲 😷 ❤ 💩 👌 ✌ 👍 👎 👆 👉 🐷 🔫'.split(' ').filter(v=>v).map(v=>({text:v}))
        const user = this.props.match.params.user
        const users = this.props.chat.users

        if(!users[user]){
            return null
        }
        const chatid = getChatId(user, this.props.user._id)
        const chatmsgs = this.props.chat.chatmsg.filter(v=>v.chatid === chatid)
        return (
            <div id="chat-page">
                <NavBar mode="dark" icon={<Icon type="left"/>} onLeftClick={()=>{this.props.history.goBack()}}>
                    {users[user].name}
                </NavBar>
                {chatmsgs.map((v,index)=>{
                    const avatar = require(`../avatar-selector/img/${users[v.from].avatar}.png`)
                    return v.from==user ? (
                        <List key={v._id}>
                            <List.Item
                               thumb={avatar}
                            >{v.content}</List.Item>
                        </List>
                    ) : (
                        <List key={v._id}>
                            <List.Item 
                                extra={<img src={avatar}/>}
                                className="chat-me">{v.content}</List.Item>
                        </List>
                    )
                })}
                
                <div className="stick-footer">
                    <List>
                        <InputItem
                            placeholder="请输入"
                            value={this.state.text}
                            onChange={v=>{
                                this.setState({text:v})
                            }}
                            extra={
                                <div>
                                    <span style={{marginRight:15}} onClick={()=>{
                                            this.setState({
                                                showEmoji: !this.state.showEmoji
                                            })
                                            this.fixCarouserl()
                                        }}>😀</span>
                                    <span onClick={()=>this.handleSubmit()}>发送</span>
                                </div>
                            }
                        ></InputItem>

                    </List>
                    {this.state.showEmoji ? <Grid
                    columnNum={8}
                    carouselMaxRow={2}
                    isCarousel={true}
                    data={emoji}
                    onClick={el=>{
                        this.setState({
                            text:this.state.text + el.text
                        })
                    }}
                    ></Grid> : null}
                    
                </div>
            </div>
        )
    }
}
